<template>
  <div class="typePage">


     <div class="typeform">

       <Form :model="formItem" :label-width="80">

         <Form-item label="类型选择">
           <Radio-group v-model="formItem.type" type="button">
             <template v-for="Row in formItem.list">
               <div class="typeform-row">
               <template v-for="item in Row">
                 <Radio :label="item.id">
                   {{item.name}}
                 </Radio>
               </template>
               </div>
             </template>
           </Radio-group>
         </Form-item>



       </Form>

       <bottomBtn @next="nextPage"></bottomBtn>

       <Modal
         v-model="modal.state"
         title="提示"
         :mask-closable="false"
         :closable="false"
         @on-ok="asyncOK">
         <h2>确定要选的项目为<span style="color: #9e2828;">{{formItem.type}}</span></h2>
       </Modal>
     </div>
  </div>
</template>
<script>
    import _ from "lodash";
    import {mapMutations, mapState} from 'vuex';
    import bottomBtn from "base/bottomBtn.vue";
    import {getTypes} from "api/getTypes";

    export default {
        props: {},
        data() {
            return {
              formItem:{
                type:'1',
                list:[]
              },
              modal:{
                state:false,
                loading:true
              }
            }
        },
        methods: {
          nextPage(){
              this.modal.state = true;
          },
          asyncOK(){
//            this.$router.push("/goods");
            this.setType(this.formItem.type);
            this.setNavIndex(1);
          },
          _getTypes(){
            getTypes().then((Rs)=>{
              this.formItem.list = _.chunk(Rs.data,4) ;
            })
          },
          ...mapMutations({
             "setNavIndex":'SET_NAVINDEX',
             "setType":"SET_TYPE"
          })
        },
        components: {
          bottomBtn
        },
        mounted() {
          window.skipNav = this.setNavIndex;

        },
        created() {
          this._getTypes();
        },
        activated(){
          this.setNavIndex(0);
        },
        deactivated(){

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteUpdate(to, from, next) {
            next(vm => {

            })
        },
        beforeRouteLeave(to, from, next) {
            next(vm => {

            })
        },
        watch:{
          "formItem.type":function () {
            this.setType(this.formItem.type)
          }
        }
    }
</script>

<style lang="less">
  .typePage{
    width: 100%;
    height: 100%;
    .typeform{
       padding: 40px 0;

      &-row{
        padding: 10px 0;
      }
    }
    .ivu-form-item-label{
      font-size: 14px;
    }
    .ivu-radio-group-button .ivu-radio-wrapper{
       border-radius: 8px;
       border-left:1px solid #ccc;
       margin-left: 26px;
       padding: 8px 15px;
       height: auto;
       line-height: normal;
       background: #f7f7f7;
       font-size: 16px;

      &:hover{
        color: inherit;
      }
    }
    .ivu-radio-group-button .ivu-radio-wrapper-checked{
      border-color: #9e2828;
      background: #9e2828;
      color: #fff;
      box-shadow:none;
      &:hover{
        color:#fff;
      }
    }
  }
</style>
